$(function(){
    if(localStorage.getItem('goods')){
        var goodsArr=JSON.parse(localStorage.getItem('goods'))
        $.ajax({
            url: '../data/jmyp.json',
            type: 'get',
            dataType: 'json',
            success: function (data){
                $.each(data,function(index,item){
                    $.each(goodsArr,function(index,obj){
                        if(item.id===obj.id){
                            var goodsDom = `
                            
                            <li>
                                <input pl-id="${obj.id}" class="check" type="checkbox">
                                <img src="${item.imgurl}" alt="">
                                <h3>${item.title}</h3>
                                <span class="price">${item.price}</span>
                                <button class="jian">-</button>
                                <input type="text" class="num" value="${obj.num}">
                                <button class="jia">+</button>
                                <span class="jine">${item.price}</span>
                                <span class="del" data-id="${obj.id}">删除</span>
                            </li>
                            `
                            $('.list').append(goodsDom)
                        }
                    })
                })
                var toubu=`
                <div class="head">
            <span><input class="all" type="checkbox"> 全选</span>
            <span>商品</span>
            <span>单价</span>
            <span>数量</span>
            <span>金额</span>
            <span>操作</span>
        </div>`

        $('.content').prepend(toubu)




        var foot=`<div class="jiesuan">
        <ul>
            <li><input type="checkbox" class="quan"">全选</li>
            <li><button class="piliang">批量删除</button></li>
            <li>已选择<span>0</span>件商品</li>
            <li>总计:￥<span style="color: red;font-size: 18px;">0</span></li>
            <li><button style="background-color: #ff2823;border: 0;
                color: #fff5f5;width: 117px;height: 40px;">结算</button></li>
        </ul>
    </div>`

    $('.content').append(foot)
            }
            
        })
        



        $('.content').on('click','.all',function(){
            if ($(this).prop('checked')) {
                $('.check').prop('checked',true)
                $('.quan').prop('checked',true)
            } else {
                $('.check').prop('checked',false)
                $('.quan').prop('checked',false)
            }
            fun1()
        })
 
        $('.list').on('click','.check',function(){
            $('.check').each(function (index,dom){
                if (!$(dom).prop('checked')) {
                    $('.all').prop('checked',false)
                    $('.quan').prop('checked',false)
                    return false
                }
                $('.all').prop('checked',true)
                $('.quan').prop('checked',true)
            })
            fun1()
        })

        $('.content').on('click','.quan',function(){
            if ($(this).prop('checked')) {
                $('.check').prop('checked',true)
                $('.all').prop('checked',true)
                
            } else {
                $('.check').prop('checked',false)
                $('.all').prop('checked',false)
            }
            fun1()
        })


function fun1(){
    var cont=document.querySelector('.content')
        var xuans=document.querySelectorAll('.check')
        var list=document.querySelector('.list')
        var jiesuan=document.querySelector('.jiesuan')
        
            var uls=list.children
            
            var sum=0
            var num=0
            
            for(var i=0;i<uls.length;i++){
                
                var xiaoji=uls[i].children[3].innerHTML
                var mm=uls[i].children[5].value
                var jine=uls[i].children[7].innerHTML
                if(xuans[i].checked){
                num+=parseInt(mm)
                sum=parseFloat(xiaoji)*num
            }
            jine=xiaoji*mm
            
            uls[i].children[7].innerHTML=jine
            jiesuan.children[0].children[3].lastElementChild.innerHTML=sum
            jiesuan.children[0].children[2].lastElementChild.innerHTML=num
        
    
        }
}
        



        
    $('.list').on('click','.jia',function(){
        var num11=$(this).prev().val()
        num11++
        $(this).prev().val(num11)

        var id=$(this).siblings().last().attr('data-id')
        console.log(id);

        
        fun1()
    })

    
        /* var numm = goodsArr.find(id == id)
        console.log(item.id); */
        //num11.numm=num11
        // console.log(num11);
        // var goodsArr=JSON.parse(localStorage.getItem('goods'))
        // localStorage.setItem('goods',JSON.stringify(goodsArr))
   

    $('.list').on('click','.jian',function(){
        var num22=$(this).next().val()
        num22--
        if(num22<=1){
            num22=1
        }
        $(this).next().val(num22)
        fun1()
    })



    
    /* $('.content').on('click','.piliang',function(){
        
        var id=$('.list').children().children().last().attr('data-id')
        console.log(id);
        $.each(goodsArr,function(index,item){
            console.log(index);
            
            if ($('.list').children().children().first().prop('checked')){
                
            }
        })
        
    }) */







        
        $('.list').on('click','.del',function(){
            
            var id=$(this).attr('data-id')
            $(this).parent().remove()
            fun1()
            $.each(goodsArr,function (index,item){
                if (item.id === id) {
                    goodsArr.splice(index,1)
                    return false
                }
            })

            if(goodsArr.length>0){
                localStorage.setItem('goods',JSON.stringify(goodsArr))
            } else {
                localStorage.removeItem('goods')
                
                
                
                $('.content').children().remove()
                var toutou =`
        <div class="carbox">
                <div class="carlogo">
                    <img src="./imgs/empty_icon.jpg" alt="">
                </div>
                <div class="cartext">
                    <h2>您的购物车中没有商品，请先去挑选心爱的商品吧！</h2>
                    <p>你可以<a href="./jmyp.html">返回首页</a>挑选喜欢的商品,或者</p>
                    <input type="text" class="search" placeholder="搜搜您想要的商品">
                </div>
            </div>`
        $('.content').html(toutou)
            }
            alert('删除商品成功')
            
        })
        
    }else {
        var toutou =`
        <div class="carbox">
                <div class="carlogo">
                    <img src="./imgs/empty_icon.jpg" alt="">
                </div>
                <div class="cartext">
                    <h2>您的购物车中没有商品，请先去挑选心爱的商品吧！</h2>
                    <p>你可以<a href="./jmyp.html">返回首页</a>挑选喜欢的商品,或者</p>
                    <input type="text" class="search" placeholder="搜搜您想要的商品">
                </div>
            </div>`
        $('.content').html(toutou)
        
    }
    
})



setTimeout(function(){
    var pil=document.querySelector('.piliang')
    var cont=document.querySelector('.content')
    var xuans=document.querySelectorAll('.check')
    var list=document.querySelector('.list')
    var jiesuan=document.querySelector('.jiesuan')
    cont.onclick = function (e) {
        var e = e || window.event
        var target = e.target || e.srcElement
        if(target.innerHTML=="批量删除"){
            for(var i=xuans.length-1;i>=0;i--){
                if(xuans[i].checked){
                  xuans[i].parentNode.remove()  
                }          
    }
}if(target.innerHTML=="结算"){
    alert('余额不足')
}
}
    
},50) 

